<template>
  <div>
    <a-modal
      :title="title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      destroyOnClose
    >
      <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 14 }" :form="form">
        <a-form-item label="取消原因">
          <a-select
            showSearch
            allowClear
            style="width: 150px"
            :options="resasonList"
            v-decorator="[
              'reason',
              {
                rules: [{ required: true, message: '请选择取消原因' }],
              },
            ]"
            placeholder="请选择取消原因"
          >
          </a-select>
        </a-form-item>
        <a-form-item label="具体原因">
          <a-textarea
            :auto-size="{ minRows: 3, maxRows: 8 }"
            v-decorator="['cancelSpecificReason']"
            placeholder="请输入具体原因"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      fileList: [],
      form: "",

      /**
       *无法联系上买家
       *买家误拍或重拍了
       *买家无诚意完成交易
       *已经缺货无法交易
       */
      resasonList: [
        {
          label: "无法联系上买家",
          value: "无法联系上买家",
        },
        {
          label: "买家误拍或重拍了",
          value: "买家误拍或重拍了",
        },
        {
          label: "买家无诚意完成交易",
          value: "买家无诚意完成交易",
        },
        {
          label: "已经缺货无法交易",
          value: "已经缺货无法交易",
        },
      ],
    };
  },
  props: {
    value: {
      require: true,
      default: false,
      type: Boolean,
    },
    title: {
      default: "取消订单",
      type: String,
    },
    records: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  mounted() {
    this.form = this.$form.createForm(this, { name: "coordinated" });
  },
  watch: {
    value(val) {
      console.log(val);
      this.visible = val;
    },
    visible(val) {
      if (val && this.records.id) {
        this.$nextTick(() => {
          const formItems = this.form.getFieldsValue();
          Object.keys(formItems).forEach((key) => {
            formItems[key] = this.records[key];
          });
          this.form.setFieldsValue(formItems);
        });
      }
      this.$emit("input", val);
    },
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.confirmLoading = true;
      this.form.validateFields((err, values) => {
        if (!err) {
          let url = `/order/goods/cancel`;
          console.log(values, "values");
          let parmas = {
            cancelSpecificReason: `${values.reason}${
              !!values.cancelSpecificReason ? values.cancelSpecificReason : ""
            }`,
            orderGoodsId: this.records.id,
          };

          this.$post(url, { ...values, ...parmas }).then((res) => {
            if (res && res.returnCode === 1000) {
              this.$message.success("订单已取消！");
              this.$emit("handleSubmit");
            }
          });
        }
      });
      this.confirmLoading = false;
    },
    handleCancel(e) {
      this.visible = false;
    },
    handleChange(info) {
      this.fileList = [info];
    },
  },
};
</script>
